<template>
  <div class="table-box">
    <div class="table-slot">
      <slot name="default"></slot>
    </div>
    <div class="table-footer">
      <div class="table-footer-left">
        <el-select
          size="small"
          placeholder="Select"
          :value="limit"
          style="width: 140px"
          @change="limitChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="table-footer-center"></div>
      <div class="table-footer-right">
        <el-pagination
          size="small"
          background
          :page-size="limit"
          layout="total, prev, pager, next,jumper"
          :total="total"
          @change="paginationChange"
          @prev-click="paginationPrev"
          @next-click="paginationNext"
        />
      </div>
    </div>
  </div>
</template>

<script setup>

defineProps({
  total: {
    type: Number,
    default: 0,
  },
  limit: {
    type: Number,
    default: 10,
  },
  page: {
    type: Number,
    default: 0,
  },
  pagination: {
    type: Boolean,
    default: true,
  },
});
const VueEmits = defineEmits(["paginationChange", "limitChange"]);
const options = [
  {
    value: 10,
    label: "10条/页",
  },
  {
    value: 20,
    label: "20条/页",
  },
  {
    value: 30,
    label: "30条/页",
  },
  {
    value: 40,
    label: "40条/页",
  },
  {
    value: 50,
    label: "50条/页",
  },
];
function limitChange(e) {
  VueEmits("limitChange",e)
}
function paginationChange(e) {
  VueEmits("paginationChange", e);
}
function paginationPrev(e) {
  VueEmits("paginationChange", e);
}
function paginationNext(e) {
  VueEmits("paginationChange", e);
}
</script>
<style lang="scss" scoped>
.table-box {
  background: white;
}
.table-slot {
  padding: 15px;
}
.table-footer {
  display: flex;
  padding: 15px 15px;
  box-sizing: border-box;
  padding-top: 0px;
  justify-content: space-between;
  &-left {
    max-width: 120px;
  }
  &-center {
    flex: 1;
  }

  &-right {
  }
}
</style>